<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div class="m-common m-securitypwd m-bid">
			<h3 class="header f-pr">
				<span>投标</span>
				<i class="icon-angle-left f-pa" @tap="back()"></i>
			</h3>

			<div class="credit f-pr">
				<h3 v-text="name"></h3>
				<div class="amount">
					<p>剩余金额(元)</p>
					<p v-text="surplus_amount"></p>
				</div>
				<div class="info f-pa clearfix">
					<p>
						<span>{{rate}}<small>%</small></span>
						<span>预期收益</span>
					</p>
					<p>
						<span>{{dead_line}}<small>{{date_type}}</small></span>
						<span>期限</span>
					</p>
					<p>
						<span>{{bid_count}}<small>人</small></span>
						<span>已购</span>
					</p>
				</div>
			</div>
			<ul class="mt">
				<li>
					<label>投资金额</label>
					<input type="tel" class="amount" id="amount" placeholder="请输入投资金额" value="">
					<button class="code-text all f-pa" id="all">全投</button>
					<i class="close-icon f-pa"></i>
				</li>
				<!--<li>
					<label>预计收益</label>
					<input type="text" class="profit" v-model="total" readonly="true">
				</li>-->
			</ul>
			<ul class="mt">
				<li>
					<label>可用余额</label>
					<input type="text" readonly="true" v-model="balance">
					<button class="code-text f-pa" id="recharge">充值</button>
				</li>
				<li>
					<label>理财券</label>
					<input type="text" class="coupon" id="coupon" readonly="readonly" value="请选择加息券">
					<i class="icon-triangle-down f-pa"></i>
				</li>
				<li>
					<label>支付密码</label>
					<input type="password" class="password" placeholder="请输入支付密码">
				</li>
			</ul>
			<div class="btn-box">
				<a class="btn">投标</a>
			</div>
			<input type="hidden" id="coupon-id" value="">
			<input type="hidden" id="balance_decimal" v-model="balance_decimal">

		</div>
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/mui.picker.min.js"></script>
		<script type="text/javascript" src="../js/mui.poppicker.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>

		<script type="text/javascript">
			mui.plusReady(function() {
				var webview = plus.webview.currentWebview(),
					user = plus.storage.getItem('user_id');
				var vm = new Vue({
					el: '.m-bid',
					data: {
						rate: webview.rate,
						dead_line: webview.dead_line,
						date_type: webview.date_type,
						bid_count: webview.bid_count,
						surplus_amount: webview.surplus_amount,
						surplus_unit: webview.surplus_unit,
						credit: webview.credit,
						name: webview.name,
						balance: '0.00',
						balance_decimal: 0,
						total: '0.00'
					},
					methods: {
						back: function() {
							mui.back();
						}
					}
				});

				mui.ajax(base + 'account/availablebalance', {
					type: 'get',
					data: {
						'id': user
					},
					dataType: 'json',
					headers: sign(md5),
					success: function(data) {
						console.log('获取用户余额：' + JSON.stringify(data));
						vm.balance = data.balance;
						vm.balance_decimal = data.balance_decimal;
					},
					error: function() {
						console.error('error');
					}
				});

				$('.close-icon').on('tap', function() {
					vm.total = '0.00';
					$(this).siblings('input').val('');
					$(this).hide();
				});

				// 获取预计收益，传参到bidsuccess页面
				$('#amount').on('keyup', function() {
					var value = $(this).val();
					console.log(value)
					if(value) {
						$(this).siblings('.close-icon').show();
						mui.ajax(base + 'credit/calculator', {
							type: 'get',
							data: {
								'credit': webview.credit,
								'amount': value
							},
							dataType: 'json',
							headers: sign(md5),
							success: function(data) {
								console.log('计算当前收益：' + JSON.stringify(data))
								if(data.result) {
									vm.total = data.total - value;
									vm.total = vm.total.toFixed(2);
								}
							},
							error: function() {
								console.error('error');
							}
						});
					} else {
						$(this).siblings('.close-icon').hide();
					}
				});

				// 投标
				$('.btn').on('tap', function() {
					var credit = webview.credit,
						amount = $('#amount').val(),
						coupon = $('#coupon-id').val(),
						password = $('.password').val();
					//大于0且最多两位小数的正数
					var regex = /^([1-9][0-9]*(\.[0-9]{1,2})?|0\.(?!0+$)[0-9]{1,2})$/;
					if(!regex.test(amount)) {
						mui.toast("投标金额格式不正确");
						return;
					}
					//验证支付密码
					password = password.replace(/\s/g, '');
					if(password === '') {
						mui.toast("支付密码不能为空");
						return false;
					}
					mui.ajax(base + 'credit/bid', {
						type: 'post',
						data: {
							'user': user,
							'credit': credit,
							'amount': amount,
							'coupon': coupon,
							'password': password
						},
						dataType: 'json',
						headers: sign(md5),
						success: function(data) {
							console.log('投标结果：' + JSON.stringify(data));
							if(data.result) {
								mui.openWindow({
									url: 'bidsuccess.html',
									extras: {
										name: vm.name,
										total: vm.total,
										amount: amount
									},
									show: {
										aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
									}
								});
								var projectwebview = plus.webview.getWebviewById('project.html');
								mui.fire(projectwebview, 'bidSuccess', {});
								//重新加载个人中心数据
								//plus.webview.getWebviewById('html/account.html').evalJS('init();');
								var accountwebview = plus.webview.getWebviewById('html/account.html')
								mui.fire(accountwebview, 'loginSuccess', {});
							} else {
								mui.openWindow({
									url: 'biderror.html',
									extras: {
										message: data.message
									},
									show: {
										aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
									}
								});
							}
						},
						error: function(data) {
							console.error(data.message);
						}
					});
				});

				var array = [{
					value: '0',
					text: '请选择加息券'
				}];
				var picker = new mui.PopPicker();
				picker.setData(array);
				var showPicker = document.getElementById('coupon');
				var bankCode = document.getElementById('coupon-id');
				showPicker.value = array[0].text;
				bankCode.value = array[0].value;
				showPicker.addEventListener('tap', function() {
					picker.show(function(items) {
						showPicker.value = items[0].text;
						bankCode.value = items[0].value;
					});
				}, false);

				mui.ajax(base + 'credit/coupon', {
					type: 'get',
					data: {
						'user': user
					},
					dataType: 'json',
					headers: sign(md5),
					success: function(data) {
						var list = [{
							value: '0',
							text: '请选择加息券'
						}];
						for(var i = 0, len = data.list.length; i < len; i++) {
							list.push({
								value: data.list[i].id,
								text: data.list[i].name
							});
						}
						picker.setData(list);
					},
					error: function() {
						console.error('error');
					}
				});

				$('#all').on('tap', function() {
					$('#amount').val($('#balance_decimal').val());
				});

				$('#recharge').on('tap', function() {
					var user = parseInt(plus.storage.getItem('user_id'));
					if(user > 0) {
						mui.openWindow({
							url: 'recharge.html',
							show: {
								aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
							}
						});
						setTimeout(function() {
							var _self = plus.webview.getWebviewById('bid.html');
							plus.webview.close(_self, "fade-out", 500); //没有动画
						}, 500);

					} else {
						mui.openWindow({
							url: 'passport.html'
						});
					}
				});
			});
		</script>
	</body>

</html>